<template>
  <div>
    <el-form
      :ref="formRef"
      :model="form"
      label-width="150px"
      class="app-container"
    >
      <el-form-item :label="$t('personalcenter.companyName')">
        <el-input v-model="tenantName" disabled :style="{ width: '450px' }" />
      </el-form-item>
      <el-form-item :label="$t('account.telPhone')">
        <el-input v-model="form.telPhone" disabled />
        <el-button type="text" @click="modMobile">
          {{ $t('btns.edit') }}
        </el-button>
      </el-form-item>
      <el-form-item :label="$t('personalcenter.compellation')">
        <el-input v-model="form.userName" />
      </el-form-item>
      <el-form-item :label="$t('personalcenter.department')">
        <el-input v-model="form.departmentName" />
      </el-form-item>

      <el-form-item class="footer">
        <div class="line">
          <el-button type="primary" @click="submitForm">
            {{ $t('btns.confirm') }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <ModifyMobile
      :visible="modalKey === modalKeys.modMoble"
      :modal-data.sync="form"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ModifyMobile from './ModifyMobile'

const modalKeys = {
  modMoble: 'mm'
}

export default {
  components: {
    ModifyMobile
  },
  data() {
    return {
      formRef: 'form',
      form: {},
      tenantName: '',
      modalKeys
    }
  },
  computed: {
    ...mapGetters(['modalKey'])
  },
  mounted() {
    this.$store.dispatch('personalcenter/getUserInfo').then(userInfo => {
      const { dmpAuthUser, tenantName } = userInfo || {}
      this.form = dmpAuthUser || {}
      this.tenantName = tenantName
    })
  },

  methods: {
    submitForm() {
      this.$refs[this.formRef].validate(valid => {
        if (!valid) {
          return
        }
        this.$store.dispatch(
          'personalcenter/onUpdateUser',
          Object.assign({}, this.form, {
            tenantName: this.tenantName
          })
        )
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    modMobile() {
      this.$store.dispatch('showModal', {
        modalKey: modalKeys.modMoble,
        modalData: this.form
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
}
</style>
